<%--
  Created by IntelliJ IDEA.
  User: K
  Date: 2022/8/19
  Time: 17:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>财务分析</title>
    <script src="${pageContext.request.contextPath}/static/js/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/static/js/echarts.min.js" type="text/javascript"></script>
</head>
<body>
<%-- 初始化容器--%>
<div id="bill" style="width: 1080px;height: 600px"></div>
<script>
    $(document).ready(function () {
        // 初始化容器
        var bill = echarts.init(document.getElementById("bill"))
        //数据加载完之前先显示一段简单的loading动画
        bill.showLoading();
        // 发送一个ajax请求
        $.ajax({
            url: "${pageContext.request.contextPath}/Bill/billVisual",
            dataType: "json",
            type: "get",
            success: function (result) {
                bill.hideLoading();    //隐藏加载动画
                // 样式
                option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                        left: 'center'
                    },
                    series: [
                        {
                            name: '收支情况',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '40',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: result.obj.obj
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表
                bill.setOption(option);
            }, error: function () {
                alert("服务器错误");
                bill.hideLoading();
            }
        })
    })
</script>
</body>
</html>
